<template>
  <div style="font-size: 20px;">
      <ul>
      <li v-for="topic in list" :key="topic.id" class="my-2">
          <img :src="topic.author.avatar_url" alt="" width="40" height="40" class="mx-2">
          <a href="">{{ topic.title }}</a>
      </li>
    </ul>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref, watch, onMounted } from 'vue';

// 分页数据
const list = ref([]);

const sum = ref(1)

onMounted(() => {
  axios.get('https://cnodejs.org/api/v1/topics', {
      params: {limit: 5}
    }).then(  res => {
      console.log('res.data.data=>', res.data.data);
      list.value = res.data.data;
    } );
})

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  height: 60px;
  line-height: 60px;
  padding-left: 10px;
}

li:hover {
  background-color: rgb(158, 194, 196);
}

a {
  text-decoration: none;
  color:#333;
}

a:hover {
  text-decoration: underline;
}

</style>